<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>首页 ——学子商城</title>
	<link rel="icon" href="./img/favicon.ico">
	<link rel="stylesheet" href="./css/normalize.css">
	<link rel="stylesheet" href="./css/index.css">
</head>
<body>
	<!-- f1顶部导航栏 -->
	<div class="f1">
		<div class="container">
			<!-- 左侧logo和搜索框 -->
			<div class="f1_left">
				<a class="logo" href="./index.html">
					<!-- logo图标 -->
					<span></span>
				</a>
				<div class="search">
					<input type="text" placeholder="请输入你要搜索的内容">
					<!-- 放大镜图标 -->
					<a href="./products.html">
						<span></span>
					</a>
					<div>
						<div>分类搜索</div>
						<div></div>
					</div>
				</div>
			</div>
			<!-- 导航功能菜单 -->
			<div class="nav_list">
				<ul>
					<li>
						<a class="heart" href="#"></a>
					</li>
					<li>
						<a class="order" href="#"></a>
					</li>
					<li>
						<a class="cart" href="#"></a>
					</li>
					<li><a href="./register.html">注册</a></li>
					<li><a href="./login.html">登录</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- f2 功能菜单 -->
	<div class="f2">
		<div class="container">
			<div class="nav_list">
				<ul>
					<li><a href="./index.html">首页</a></li>
					<li><a href="./products.html">学习用品</a></li>
					<li><a href="#">私人订制</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- f3 轮播广告 -->
	<div class="f3">
		<div class="container">
			<div class="carousel">
				<!-- 轮播广告项 -->
				<div class="carousel-inner" id="carousel_inner">
					<div class="carousel-item current" >
						<img src="./img/banner1.png">
					</div>
					<div class="carousel-item"  >
						<img src="./img/banner2.png">
					</div>
					<div class="carousel-item" >
						<img src="./img/banner3.png">
					</div>
					<div class="carousel-item"  >
						<img src="./img/banner4.png">
					</div>
				</div>
				<!-- 轮播广告的控制炳 -->
				<div class="carousel-control">
					<div class="prev">&lt;</div>
					<div class="next">&gt;</div>
				</div>
				<!-- 控制轮播张数 -->
				<ul class="control_list" id="indicator">
					<li class="cur" data-toggle="0"></li>
					<li data-toggle="1"></li>
					<li data-toggle="2"></li>
					<li data-toggle="3"></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- f4 首页推荐 -->
	<div class="f4">
		<div class="container">
			<!-- 标题 -->
			<div class="row1">
				<div class="computer_icon">
					<span></span>
				</div>
				<div>首页推荐 /1F</div>
			</div>
			<!-- 内容 -->
			<div class="row2">
				<!-- 商品 -->
				<div class="laptop1">
					<img src="./img/study_computer_img1.png">
					<div class="main">
						<div class="h2">Apple MacBook Air系列</div>
						<div class="desc">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</div>
						<div class="price1">￥6988.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop2">
					<img src="./img/study_computer_img2.png">
					<div class="main">
						<div class="h2">小米Air 金属超轻薄</div>
						<div class="desc">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</div>
						<div class="price1">￥3488.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop3">
					<img src="./img/study_computer_img3.png">
					<div class="main">
						<div class="h3">联想E480C 轻薄系列</div>
						<div class="price1">￥5399.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img4.png">
					<div class="main">
						<div class="h4">华硕RX310 金属超极本</div>
						<div class="price2">￥4966.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img5.png">
					<div class="main">
						<div class="h4">联想小新700 电竞版游戏本</div>
						<div class="price2">￥6299.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img3.png">
					<div class="main">
						<div class="h4">联想小新700 电竞版游戏本</div>
						<div class="price2">￥6299.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f4 最新上架 -->
	<div class="f5">
		<div class="container">
			<!-- 标题 -->
			<div class="row1">
				<div class="computer_icon">
					<span></span>
				</div>
				<div>最新上架 /2F</div>
			</div>
			<!-- 内容 -->
			<div class="row2">
				<!-- 商品 -->
				<div class="laptop1">
					<img src="./img/study_computer_img1.png">
					<div class="main">
						<div class="h2">Apple MacBook Air系列</div>
						<div class="desc">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</div>
						<div class="price1">￥6988.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop2">
					<img src="./img/study_computer_img2.png">
					<div class="main">
						<div class="h2">小米Air 金属超轻薄</div>
						<div class="desc">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</div>
						<div class="price1">￥3488.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop3">
					<img src="./img/study_computer_img3.png">
					<div class="main">
						<div class="h3">联想E480C 轻薄系列</div>
						<div class="price1">￥5399.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img4.png">
					<div class="main">
						<div class="h4">华硕RX310 金属超极本</div>
						<div class="price2">￥4966.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img5.png">
					<div class="main">
						<div class="h4">联想小新700 电竞版游戏本</div>
						<div class="price2">￥6299.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img3.png">
					<div class="main">
						<div class="h4">联想小新700 电竞版游戏本</div>
						<div class="price2">￥6299.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f5 热销单品 -->
	<div class="f6">
		<div class="container">
			<!-- 标题 -->
			<div class="row1">
				<div class="computer_icon">
					<span></span>
				</div>
				<div>热销单品 /3F</div>
			</div>
			<!-- 内容 -->
			<div class="row2">
				<!-- 商品 -->
				<div class="laptop1">
					<img src="./img/study_computer_img1.png">
					<div class="main">
						<div class="h2">Apple MacBook Air系列</div>
						<div class="desc">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</div>
						<div class="price1">￥6988.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop2">
					<img src="./img/study_computer_img2.png">
					<div class="main">
						<div class="h2">小米Air 金属超轻薄</div>
						<div class="desc">酷睿双核i5处理器|512GB SSD|2GB内存|英特尔HD独立显卡</div>
						<div class="price1">￥3488.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop3">
					<img src="./img/study_computer_img3.png">
					<div class="main">
						<div class="h3">联想E480C 轻薄系列</div>
						<div class="price1">￥5399.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img4.png">
					<div class="main">
						<div class="h4">华硕RX310 金属超极本</div>
						<div class="price2">￥4966.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img5.png">
					<div class="main">
						<div class="h4">联想小新700 电竞版游戏本</div>
						<div class="price2">￥6299.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
				<div class="laptop4">
					<img src="./img/study_computer_img3.png">
					<div class="main">
						<div class="h4">联想小新700 电竞版游戏本</div>
						<div class="price2">￥6299.00</div>
						<div class="detailbtn">
							<div>查看详情</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- f6 功能菜单-->
	<div class="f6">
		<div class="container">
			<ul class="menu">
				<li>
					<div>
						<span class="icon1"></span>
					</div>
					<div>品质保障</div>
				</li>
				<li>
					<div>
						<span class="icon2"></span>
					</div>
					<div>私人订制</div>
				</li>
				<li>
					<div>
						<span class="icon3"></span>
					</div>
					<div>学员特供</div>
				</li>
				<li>
					<div>
						<span class="icon4"></span>
					</div>
					<div>专属特权</div>
				</li>
			</ul>
		</div>
	</div>
	<!-- f7 底部的信息说明-->
	<div class="f7">
		<div class="container">
			<div class="left">
				<!-- logo图标 -->
				<span class="Footerlogo"></span>
				<!-- logo底下的文字说明 -->
				<span class="logoFonts"></span>
			</div>
			<div class="middle">
				<!-- 列表标题 -->
				<ul class="list_title">
					<li>买家帮助</li>
					<li>商家帮助</li>
					<li>关于我们</li>
				</ul>
				<!-- 列表的功能菜单 -->
				<div class="list_menu">
					<ul>
						<li><a href="#">新手指南</a></li>
						<li><a href="#">服务保障</a></li>
						<li><a href="#">常见问题</a></li>
					</ul>
					<ul>
						<li><a href="#">商家入驻</a></li>
						<li><a href="#">商家后台</a></li>
					</ul>
					<ul>
						<li><a href="#">关于达内</a></li>
						<li><a href="#">联系我们</a></li>
						<li class="lianxi">
							<span class="wechat"></span>
							<span class="sinablog"></span>
						</li>
					</ul>
				</div>
			</div>
			<!-- 客户端信息 -->
			<div class="right">
				<div class="load">
					<div>学子商城客户端</div>
					<div>
						<span class="anroid"></span>
						<span class="ios"></span>
					</div>
				</div>
				<div class="erweima">
					<span></span>
				</div>
			</div>
		</div>
	</div>
	<!-- f8 版权说明-->
	<div class="f8">
		<div class="container">
			&copy;2017&nbsp;达内科技有限公司&nbsp;版权所有&nbsp;京ICP备08000853号-75
		</div>
	</div>
	<!-- 倒计时 -->
	<div class="timer">
		<span>
			<div class="timer_title">限时秒杀</div>
			<div class="msginfo">距<span>21</span>时场开始</div>
			<div class="daojishi">
				<span class="hour"></span>:<span class="minute"></span>:<span class="mill"></span>
			</div>
		</span>
	</div>
	<script>
		// 轮播图
		const carousel = document.getElementById('carousel_inner')
		const carousel_items = document.querySelectorAll('.carousel-item')
		// 轮播控制炳
		const indicator = document.getElementById('indicator')
		indicator.onmouseover = function(event) {
			if(event.target.tagName== 'LI') {
				indicator.getElementsByClassName('cur')[0].classList.remove('cur')
				event.target.classList.add('cur')
				const index = event.target.dataset.toggle 
				carousel.getElementsByClassName('current')[0].classList.remove('current')
				carousel_items[index].classList.add('current')
			}
		}
		// 倒计时
		let hourspan=document.querySelector('.hour');
		let minutespan=document.querySelector('.minute');
		let millspan=document.querySelector('.mill');
		setInterval(()=>{
			let date1=new Date().getTime();
			let date2=new Date(2022,1,31,21,00,00).getTime();
			let date3=date2-date1;
			date3=Math.floor(date3/1000);
			// 秒
			let secondary=date3%60;
			if(secondary<10){
				secondary = '0' + secondary;
			}
			// 分
			let minutes=Math.floor(date3%(60*60)/60);
			if(minutes < 10){
				minutes = '0' + minutes;
			}
			// 时
			let hour=Math.floor(date3%(24*60*60)/(60*60));
			if(hour < 10) {
				hour = '0' + hour;
			}
			hourspan.innerHTML=hour;
			minutespan.innerHTML=minutes;
			millspan.innerHTML=secondary;
		},1000)
	</script>
</body>
</html>